<!doctype html>
<html>
<head>
	<meta charset="utf-8"/>
	<title>url在线解码</title>
	<script src="https://lib.baomitu.com/jquery/3.3.1/jquery.min.js"></script>
	<script src="https://cdn.jsdelivr.net/pako/1.0.3/pako.min.js"></script>
	<!--<script src="https://test1-1-1.oss.cn-north-1.jcloudcs.com/api_test/jquery-1.11.2.min.js"></script>-->
	<style>
		a{
			text-decoration:unset;
		}
	</style>
</head>
<body>
	
	<fieldset style="display:none;">
		<legend>
			<a href="javascript:;" class="btn_remove" title="关闭">X-1</a>
			<!--<select class="combo_type">
				<option value="ajax">ajax-post</option>
				<option value="ajax-get">ajax-get</option>
				<option value="form">form-post</option>
			</select>-->
		</legend>
		<form>
			<div>
				<div style="float:left;">
					<div>
						<span class="line_title" style="height1:100%;line-height1:100%;vertical-align:top;">参数：</span>
                        <textarea class="txt_params" style="height:415px;width:400px;" nullmsg="请输入参数"></textarea>
					</div>
				</div>
				<div style="float:left;padding-left:20px;padding-right:20px;">
					<div style="margin-top:100px"><input type="button" value="解码" class="btn_submit"/></div>
				</div>
				<div style="float:left;">
					<div>结果：<span class="lbl_msg">
					<img class="loading-img" src="http://img.zcool.cn/community/010bd7573ab8676ac725a0822def60.gif" style="display:none;width: 20px;height: 20px;margin-bottom: -5px;">
					</span></div>
					<textarea class="txt_result" style="width:600px;height:400px;"></textarea>
				</div>
			</div>
		</form>
	</fieldset>
	<!--<a class="btn_add" href="javascript:;" style="font-size:85px;" title="再加一个"><b>+</b></a>-->
	<fieldset>
		<legend>
			<a href="javascript:;" class="btn_remove" title="关闭">X-2</a>
			<!--<select class="combo_type">
				<option value="ajax">ajax-post</option>
				<option value="ajax-get">ajax-get</option>
				<option value="form">form-post</option>
			</select>-->
		</legend>
		<form>
			<div>
				<div style="float:left;">
					<div>
						<span class="line_title" style="height1:100%;line-height1:100%;vertical-align:top;">参数：</span>
                        <textarea class="txt_params" style="height:415px;width:400px;" nullmsg="请输入参数"></textarea>
					</div>
				</div>
				<div style="float:left;padding-left:20px;padding-right:20px;">
					<div style="margin-top:100px"><input type="button" value="解码" class="btn_unzip"/></div>
				</div>
				<div style="float:left;">
					<div>结果：<span class="lbl_msg">
					<img class="loading-img" src="http://img.zcool.cn/community/010bd7573ab8676ac725a0822def60.gif" style="display:none;width: 20px;height: 20px;margin-bottom: -5px;">
					</span></div>
					<textarea class="txt_result" style="width:600px;height:400px;"></textarea>
				</div>
			</div>
		</form>
	</fieldset>
	<a class="btn_add" href="javascript:;" style="font-size:85px;" title="再加一个"><b>+</b></a>
	
	
</body>
</html>
<script>
	checkDebug();
	$(function(){
		var count=1;
		var temp=$('fieldset:visible:eq(0)').clone();
		temp.find('form')[0].reset();
		$(document).on('click','.btn_submit',function(){
			checkDebug();
			var container=$(this).closest('fieldset');
			var checkOk=true;
			container.find('[nullmsg]').each((i,ele)=>{
				if(!ele.value){
					checkOk=false;
					alert($(ele).attr('nullmsg'));
					return false;
				}
			});
			if(!checkOk){
				return;
			}
			var param=container.find('.txt_params').val();
			var resultTxt=container.find('.txt_result');
			var msgLabel=container.find('.lbl_msg');
			var loadingImg=container.find('.loading-img').show();
			$.post('urldecode.php',{content:param},function(data){
				loadingImg.hide();
				resultTxt.val(data);
			}).fail(function(){
				loadingImg.hide();
				msgLabel.text('request error');
			});
			
		});
		
		$(document).on('click','.btn_remove',function(){
			$(this).closest('fieldset').remove();
		});
		
		$(document).on('click','.btn_unzip',function(){
			var container=$(this).closest('fieldset');
			var msgLabel=container.find('.lbl_msg');
			var param=container.find('.txt_params').val();
			var resultTxt=container.find('.txt_result');
			try{
				resultTxt.val(unzip(param));
				msgLabel.text(param.length+'/'+resultTxt.val().length);
			}catch(msg){
				msgLabel.text('error');
				resultTxt.val(msg);
			}
		});
		
		$('.btn_add').click(function(){
			var ele=temp.clone();
			$(this).before(ele);
			count++;
			ele.find('.btn_remove').html('X-'+count);
			$(window).trigger('resize');
		});
		
		//$('.btn_add').trigger('click');
		
		$(window).resize(function(){
			//console.log('winresize');
			var totalWidth=$(document).width();
			$('.txt_result').each(function(i,ele){
				var jq=$(this);
				var prev=jq.parent().prev();
				jq.width(totalWidth-30-(prev.offset().left+prev.outerWidth()));
				
			});
		}).trigger('resize');
		
	});
	
	function formSubmit(action,params){
		var html='<form action="'+action+'" method="post">';
		for(var name in params){
			html+='<input name="'+name+'" value="'+params[name]+'"/>';
		}
		html+='</form>';
		$(html).hide().appendTo('body').submit();
	} 

    function formatDate(time) {
        return time > 1000 ? ((time / 1000).toFixed(2) + 's') : (time + 'ms');
    }
	
	function checkDebug(){
		if(top.location.href.indexOf('_debug')>-1){
			debugger;
		}
	}
	
	function unzip(b64Data,decodeUrl){
        var strData   = atob(b64Data);
        // Convert binary string to character-number array
        var charData  = strData.split('').map(function(x){return x.charCodeAt(0);});
        // Turn number array into byte-array
        var binData   = new Uint8Array(charData);
        // // unzip
        var data    = pako.inflate(binData);
        // Convert gunzipped byteArray back to ascii string:
        strData   = String.fromCharCode.apply(null, new Uint16Array(data));
        if(typeof(decodeUrl) =='undefined' || decodeUrl){
            return decodeURIComponent(strData);
        }
        return strData;
	}

	function zip(str){
	  var binaryString = pako.gzip(str, { to: 'string' });
	  return btoa(binaryString);
	}
	
	console.log('api调式加载完成');
</script>